<template>
  <div class="apply">
    <div class="top-btn">
      <el-button type="primary" size="medium" @click="drawer = true">添加申请</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="学生姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.uname }}
        </template>
      </el-table-column>
      <el-table-column label="班级" align="center">
        <template slot-scope="scope">
          {{ scope.row.className }}
        </template>
      </el-table-column>
      <el-table-column label="学院" align="center">
        <template slot-scope="scope">
          {{ scope.row.collegeName }}
        </template>
      </el-table-column>
      <el-table-column label="申请时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.year }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1">待审核</el-tag>
          <el-tag type="success" v-else-if="scope.row.status == 2">通过</el-tag>
          <el-tag type="danger" v-else>拒绝</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleEddit(scope.row.plusesList, scope.row.applyId)"
            :disabled="scope.row.status == 2">编辑</el-button>
          <el-button type="danger" size="mini" @click="open(scope.row)" :disabled="scope.row.status != 1">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog title="添加加分项" :visible.sync="drawer" size="50%" :before-close="handleClose">
      <el-button @click="addDomain" type="success" size="medium">新增加分项</el-button>
      <el-button type="primary" size="medium" @click="save">保存</el-button>
      <el-button type="danger" size="medium" @click="clearAll">清空</el-button>

      <el-card v-for="item, ccindex in uploadRes" class="box-item" :key="ccindex">
        <div class="flex">
          <el-upload class="upload-demo" :show-file-list="false" :http-request="uploadImage" action="" :limit="1"
            :on-exceed="handleExceed">
            <el-button size="small" type="primary" @click="choiceItemIndex = ccindex">点击上传加分</el-button>
          </el-upload>
          <el-image :src="item.imageUrl" v-if="item.imageUrl != null"></el-image>
        </div>
        <div class="flex">
          <div>证书级别</div>
          <div>
            <el-select v-model="item.grade" placeholder="请选择级别" @change="handleSelectChange($event, ccindex)">
              <el-option v-for="citem in options" :key="citem.value" :label="citem.label" :value="citem">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="flex">
          <div>加分绩点</div>
          <div>
            <el-input v-model="item.gpa" :disabled="true"></el-input>
          </div>
        </div>
        <div style="text-align: right;">
          <el-link type="danger" @click="remove(ccindex)">删除加分项</el-link>
        </div>
      </el-card>

    </el-dialog>

    <el-dialog title="修改加分项" :visible.sync="drawerUpdate" size="50%" :before-close="handleClose">
      <el-button @click="addDomain" type="success" size="medium">新增加分项</el-button>
      <el-button type="primary" size="medium" @click="update">更新</el-button>
      <el-button type="danger" size="medium" @click="clearAll">清空</el-button>

      <el-card v-for="item, ccindex in uploadRes" class="box-item">
        <div class="flex">
          <el-upload class="upload-demo" :show-file-list="false" :http-request="uploadImage" action="" :limit="1"
            :on-exceed="handleExceed">
            <el-button size="small" type="primary" @click="choiceItemIndex = ccindex">点击上传加分</el-button>
          </el-upload>
          <el-image :src="item.imageUrl" v-if="item.imageUrl != null"></el-image>
        </div>
        <div class="flex">
          <div>证书级别</div>
          <div>
            <el-select v-model="item.grade" placeholder="请选择级别" @change="handleSelectChange($event, ccindex)">
              <el-option v-for="citem in options" :key="citem.value" :label="citem.label" :value="citem">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="flex">
          <div>加分绩点</div>
          <div>
            <el-input v-model="item.gpa" :disabled="true"></el-input>
          </div>
        </div>
        <div style="text-align: right;">
          <el-link type="danger" @click="remove(ccindex)">删除加分项</el-link>
        </div>
      </el-card>

    </el-dialog>

  </div>
</template>

<script>
import { getApplyList, deleteById } from '@/api/student.js'
import { reqUpload } from '@/api/oss.js'
import { saveApply, updateApply } from '@/api/apply.js'

export default {
  name: "stu-apply",
  data() {
    return {
      list: null,
      listLoading: false,
      requestParams: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      drawer: false,
      drawerUpdate: false,
      ttt: {},
      fileList: [],
      uploadRes: [{
        imageUrl: null,
        gpa: null,
        grade: null
      }],
      choiceItemIndex: null,
      options: [{
        value: '校级一等奖',
        label: '校级一等奖',
        gpa: 0.2,
      }, {
        value: '校级二等奖',
        label: '校级二等奖',
        gpa: 0.15,
      }, {
        value: '校级三等奖',
        label: '校级三等奖',
        gpa: 0.1,
      }, {
        value: '省级一等奖',
        label: '省级一等奖',
        gpa: 0.35
      }, {
        value: '省级二等奖',
        label: '省级二等奖',
        gpa: 0.3
      }, {
        value: '省级三等奖',
        label: '省级三等奖',
        gpa: 0.25
      }, {
        value: '国家级一等奖',
        label: '国家级一等奖',
        gpa: 0.5
      }, {
        value: '国家级二等奖',
        label: '国家级二等奖',
        gpa: 0.45
      }, {
        value: '国家级三等奖',
        label: '国家级三等奖',
        gpa: 0.4
      }],

    }
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      this.listLoading = true;
      getApplyList(this.requestParams).then(res => {
        this.list = res.data.list;
        this.listLoading = false;
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭添加加分项？关闭后数据将清空', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(_ => {
          this.clearAll();
          done();
        })
        .catch(_ => { });
    },
    open(row) {
      this.$confirm('此操作将永久删除申请, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteById({ id: row.applyId }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getInfo();
        }).catch(err => {
        })


      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    addDomain() {
      this.uploadRes.push({
        imageUrl: null,
        gpa: null,
        grade: null
      });
    },
    handleExceed(files, fileList) {
      this.$message.warning('只能选择一张图片');
    },
    uploadImage(param) {
      const formData = new FormData();
      formData.append('file', param.file);
      reqUpload(formData).then(res => {
        // 上传文件
        this.uploadRes[this.choiceItemIndex].imageUrl = res.data;
      }).catch(error => {
        console.log(error)
      })
    },
    clearAll() {
      this.uploadRes = [{
        imageUrl: null,
        gpa: null,
        grade: null
      }]
    },
    save() {
      this.uploadRes = this.uploadRes.filter(item => item.gpa !== null);
      saveApply(this.uploadRes).then(res => {
        this.$message.success(res.data);
        this.drawer = false;
        this.clearAll();
        this.getInfo();
      })
    },
    remove(index) {
      this.uploadRes.splice(index, 1);
    },
    handleSelectChange(value, index) {
      this.uploadRes[index].gpa = value.gpa;
      this.uploadRes[index].grade = value.label;
    },
    handleEddit(data, applyId) {
      this.uploadRes = [ ...data ];
      this.updateApplyId = applyId;
      this.drawerUpdate = true;
    },
    update() {
      this.uploadRes = this.uploadRes.filter(item => item.gpa !== null);
      updateApply({
        applyId: this.updateApplyId,
        list: this.uploadRes
      }).then(res => {
        this.$message.success(res.data);
        this.drawerUpdate = false;
        this.clearAll();
        this.getInfo();
      })
    }

  },


}
</script>

<style scoped>
.top-btn {
  margin-bottom: 10px;
}

.apply {
  padding: 20px;
}

.flex {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.flex div {
  margin-left: 20px;
}

.box-item {
  margin: 20px 0;
}
</style>